import React, { Suspense, useState } from 'react';
import { Canvas } from '@react-three/fiber';
import { Sky } from '@react-three/drei';
import Player from './Player';
import ExhibitionHall from './ExhibitionHall';
import Lighting from './Lighting';
import Minimap from './Minimap';
import Decorations from './Decorations';
import AudioManager from '../AudioManager';
import { narrationStore } from './narrationStore';

interface Exhibition3DProps {
  onClose: () => void;
}

const Exhibition3D: React.FC<Exhibition3DProps> = ({ onClose }) => {
  const handleClose = () => {
    // 播放关门音效
    if ((window as unknown as { audioManager?: { playSound: (sound: string) => void } }).audioManager) {
      (window as unknown as { audioManager: { playSound: (sound: string) => void } }).audioManager.playSound('doorClose')
    }
    onClose()
  }

  const handleButtonClick = () => {
    // 播放点击音效
    if ((window as unknown as { audioManager?: { playSound: (sound: string) => void } }).audioManager) {
      (window as unknown as { audioManager: { playSound: (sound: string) => void } }).audioManager.playSound('click')
    }
  }

  const [auto, setAuto] = useState<boolean>(narrationStore.autoMode);

  return (
    <div style={{ 
      position: 'fixed', 
      top: 0, 
      left: 0, 
      width: '100vw', 
      height: '100vh', 
      zIndex: 1000,
      background: '#000'
    }}>
      {/* 音效管理器 */}
      <AudioManager enabled={true} />
      
      {/* 关闭按钮 */}
      <button
        onClick={handleClose}
        onMouseEnter={() => {
          if ((window as unknown as { audioManager?: { playSound: (sound: string) => void } }).audioManager) {
            (window as unknown as { audioManager: { playSound: (sound: string) => void } }).audioManager.playSound('hover')
          }
        }}
        onMouseDown={handleButtonClick}
        style={{
          position: 'absolute',
          top: '20px',
          right: '20px',
          zIndex: 1001,
          padding: '10px 20px',
          background: 'rgba(0, 0, 0, 0.7)',
          color: 'white',
          border: '1px solid rgba(255, 255, 255, 0.3)',
          borderRadius: '8px',
          cursor: 'pointer',
          fontSize: '14px',
          transition: 'all 0.3s ease'
        }}
      >
        退出展览馆
      </button>

      {/* 讲解开关 */}
      <button
        onClick={() => { narrationStore.autoMode = !narrationStore.autoMode; setAuto(narrationStore.autoMode); handleButtonClick(); }}
        onMouseEnter={() => { (window as unknown as { audioManager?: { playSound: (sound: string) => void } }).audioManager?.playSound('hover') }}
        style={{
          position: 'absolute',
          top: '20px',
          right: '140px',
          zIndex: 1001,
          padding: '10px 16px',
          background: narrationStore.autoMode ? 'rgba(0, 200, 0, 0.7)' : 'rgba(100, 100, 100, 0.7)',
          color: 'white',
          border: '1px solid rgba(255, 255, 255, 0.3)',
          borderRadius: '8px',
          cursor: 'pointer',
          fontSize: '14px',
          transition: 'all 0.3s ease'
        }}
      >{auto ? '讲解：开' : '讲解：关'}</button>

      {/* 3D Canvas */}
      <Canvas
        camera={{ position: [0, 2, 5], fov: 75 }}
        style={{ width: '100%', height: '100%' }}
      >
        <Suspense fallback={null}>
          {/* 背景与天空：避免外部HDR资源加载失败 */}
          <Sky 
            distance={450000}
            sunPosition={[0, 1, 0]}
            inclination={0}
            azimuth={0.25}
          />
          
          {/* 光照系统 */}
          <Lighting />
          
          {/* 展览馆建筑 */}
          <ExhibitionHall />
          
          {/* 装饰元素 */}
          <Decorations />
          
          {/* 玩家控制器 */}
          <Player />
        </Suspense>
      </Canvas>
      {/* Minimap Overlay */}
      <Minimap />
    </div>
  );
};

export default Exhibition3D;
